<template>
  <div class="medical-report">
    <!-- 医院抬头 -->
    <header class="hospital-header">
      <div class="hospital-info">
        <h1>明眸眼科中心诊断报告</h1>
        <div class="report-meta">
          <span>报告编号：CAT20250405002</span>
          <span>检查日期：2025-04-05</span>
        </div>
      </div>
    </header>

    <!-- 患者信息 -->
    <section class="patient-info">
      <h2 class="section-title"><span>患者基本信息</span></h2>
      <div class="form-container">
        <div class="form-row">
          <div class="form-item">
            <label>姓名：</label>
            <span class="emph-text">{{ formInline.name }}</span>
          </div>
          <div class="form-item">
            <label>性别/年龄：</label>
            <span class="emph-text">{{ formInline.gender }} | {{ formInline.age }}岁</span>
          </div>
          <div class="form-item">
            <label>出生日期：</label>
            <span class="emph-text">{{ formInline.birth }}</span>
          </div>
        </div>

        <div class="form-row">
          <div class="form-item">
            <label>身份证号：</label>
            <span class="emph-text">{{ formInline.identification }}</span>
          </div>
          <div class="form-item">
            <label>联系电话：</label>
            <span class="emph-text">{{ formInline.mobile }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 检查图像 -->
    <section class="image-box">
      <h3 class="section-title with-border">眼部影像学检查</h3>
      <div class="image-section">
        <div class="eye-card">
          <div class="eye-header">
            <span class="eye-tag left-eye">OS</span>
            <h4 class="eye-title">左眼裂隙灯成像</h4>
          </div>
          <div class="image-wrapper">
            <div class="report-image"  style="display: flex; justify-content: center; align-items: center; height: 200px;">
              <img
                  :src="leftImage"
                  alt="左眼检查图"
                  @load="imagesLoaded++"
                  crossorigin="anonymous"
              />
            </div>

            <div class="image-meta">
              <span>拍摄设备：Pentacam</span>
              <span>2025-04-05</span>
            </div>
          </div>
        </div>

        <div class="eye-card">
          <div class="eye-header">
            <span class="eye-tag right-eye">OD</span>
            <h4 class="eye-title">右眼裂隙灯成像</h4>
          </div>
          <div class="image-wrapper">
            <div class="report-image" style="display: flex; justify-content: center; align-items: center; height: 200px;">
              <img
                  :src="rightImage"
                  alt="右眼检查图"
                  @load="imagesLoaded++"
                  crossorigin="anonymous"
              />
            </div>
            <div class="image-meta">
              <span>拍摄设备：Pentacam</span>
              <span>2025-04-05</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 临床参数 -->
    <section class="clinical-params">
      <h2 class="section-title with-border">临床参数</h2>
      <div class="param-table">
        <div class="param-header">
          <div class="param-cell">检查项目</div>
          <div class="param-cell">左眼(OS)</div>
          <div class="param-cell">右眼(OD)</div>
          <div class="param-cell">参考范围</div>
        </div>

        <div
            v-for="(item, index) in currentDisease.clinicalParams.items"
            :key="index"
            class="param-row"
        >
          <div class="param-cell">{{ item }}</div>
          <div class="param-cell" :class="{'highlight': getAbnormalStatus(index).od}">
            {{ currentDisease.clinicalParams.odValues[index] }}
          </div>
          <div class="param-cell" :class="{'highlight': getAbnormalStatus(index).os}">
            {{ currentDisease.clinicalParams.osValues[index] }}
          </div>
          <div class="param-cell ref-value">{{ currentDisease.clinicalParams.references[index] }}</div>
        </div>
      </div>
      <div class="table-note">* 标红数据表示超出正常参考范围</div>
    </section>

    <!-- 病因分析 -->
    <section class="prediction-box">
      <h3 class="section-title">病症概率</h3>
      <div id="chart-container" ref="chartContainer"></div>
    </section>

    <!-- 诊断结论 -->
    <section class="diagnosis">
      <h2 class="section-title"><span>诊断结论</span></h2>
      <div class="diagnosis-content">
        <div class="conclusion-block">
          <p class="diagnosis-statement">
            <span class="diagnosis-label">临床诊断：</span><br>
            <span v-for="(line, index) in currentDisease.diagnosis.conclusion" :key="index">
        {{ index + 1 }}. {{ line }}<br>
      </span>
          </p>
        </div>
        <div class="recommendations">
          <h3>治疗建议：</h3>
          <ol class="medical-list">
            <li v-for="(item, index) in currentDisease.diagnosis.recommendations" :key="index">
              {{ index + 1 }}. {{ item }}
            </li>
          </ol>
        </div>
      </div>
    </section>

    <!-- 签名栏 -->
    <footer class="signature">
      <div class="signature-line">
        <span class="signature-label">主检平台：</span>
        <span class="signature-name">智眸眼底医学影像平台</span>
      </div>
      <p class="report-date">签发日期：2025年4月5日</p>
      <div class="disclaimer">
        ※ 本报告需结合术前生物测量数据进行人工晶体计算，术后视力恢复存在个体差异
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted,nextTick,computed} from 'vue';
import * as echarts from 'echarts';
import * as api from '../api';
import {request} from "/@/utils/service";
import {ElMessage} from "element-plus";
import fs from 'fs';
import {GetPatientInfo} from "../api";
import { useRoute, useRouter } from 'vue-router';
const route=useRoute();
interface Props {
  leftId?: string | number | null;
  rightId?: string | number | null;
}
interface UserInfo {
  name: string;
  identification: string;
  id: string;
  mobile: string;
}
interface DiseaseConfig {
  clinicalParams: {
    items: string[];
    odValues: (string | number)[];
    osValues: (string | number)[];
    references: string[];
  };
  diagnosis: {
    conclusion: string[];
    recommendations: string[];
  };
}
const diseaseConfig: Record<number, DiseaseConfig> = {
  // 正常（所有指标正常）
  0: {
    clinicalParams: {
      items: ['裸眼视力', '矫正视力', '眼压(mmHg)', '角膜曲率(D)'],
      odValues: [1.2, 1.5, 16, '43.2/43.8'],
      osValues: [1.0, 1.2, 15, '43.5/44.1'],
      references: ['≥0.8', '≥1.0', '10-21', '42.0-45.0']
    },
    diagnosis: {
      conclusion: ['双眼检查结果均在正常范围内'],
      recommendations: [
        '建议每2年常规眼科检查',
        '保持健康用眼习惯',
        '户外活动每日2小时以上'
      ]
    }
  },
  // 糖尿病视网膜病变（2项异常）
  1: {
    clinicalParams: {
      items: ['裸眼视力', '矫正视力', '微血管瘤', '黄斑厚度(μm)'],
      odValues: [0.8, 1.0, '++', 305],  // 仅微血管瘤异常
      osValues: [0.7, 0.9, '无', 295],   // 裸眼视力和矫正视力异常
      references: ['≥0.8', '≥1.0', '无', '≤300']
    },
    diagnosis: {
      conclusion: [
        '糖尿病性视网膜病变（DR分期：轻度非增殖期）',
        '右眼黄斑水肿（DME）'
      ],
      recommendations: [
        '血糖控制（目标HbA1c<7.0%）',
        '右眼抗VEGF治疗（每月1次）',
        'OCT检查每3个月复查'
      ]
    }
  },
  // 青光眼（2项异常）
  2: {
    clinicalParams: {
      items: ['眼压(mmHg)', '杯盘比', '视野缺损', 'RNFL厚度(μm)'],
      odValues: [22, 0.7, '无', 82],   // 眼压和杯盘比异常
      osValues: [19, 0.65, '无', 85],  // 杯盘比异常
      references: ['10-21', '≤0.6', '无', '≥80']
    },
    diagnosis: {
      conclusion: [
        '原发性开角型青光眼（POAG早期）',
        '右眼高眼压症'
      ],
      recommendations: [
        '前列腺素类滴眼液（每晚1次）',
        '24小时眼压监测',
        '每3个月视野检查'
      ]
    }
  },
  // 白内障（1项异常）
  3: {
    clinicalParams: {
      items: ['裸眼视力', '矫正视力', '晶状体混浊', '核硬度分级'],
      odValues: [0.6, 0.8, 'II级核性', 'NO2'],  // 晶状体混浊异常
      osValues: [0.7, 0.9, '透明', 'NO1'],       // 正常
      references: ['≥0.8', '≥1.0', '透明', 'NO1']
    },
    diagnosis: {
      conclusion: ['双眼年龄相关性白内障（LOCS III分级）'],
      recommendations: [
        '白内障超声乳化手术规划',
        '人工晶体度数测量',
        '术前角膜内皮计数检查'
      ]
    }
  },
  // AMD（2项异常）
  4: {
    clinicalParams: {
      items: ['中心视力', '黄斑厚度(μm)', '玻璃膜疣', '视网膜下液高度(μm)'],
      odValues: [0.6, 310, '++', 120],   // 黄斑厚度异常
      osValues: [0.8, 290, '无', '无'],    // 正常
      references: ['≥0.8', '≤300', '无', '无']
    },
    diagnosis: {
      conclusion: ['右眼干性年龄相关性黄斑变性（早期）'],
      recommendations: [
        'AREDS2配方营养补充',
        '戒烟及紫外线防护',
        '每6个月OCT复查'
      ]
    }
  },
  // 高血压（1项异常）
  5: {
    clinicalParams: {
      items: ['动静脉比', '出血斑', '棉绒斑', '血压(mmHg)'],
      odValues: ['1:3', '无', '无', '158/102'],  // 血压异常
      osValues: ['1:2', '无', '无', '143/88'],  // 正常
      references: ['1:2-1:3', '无', '无', '<140/90']
    },
    diagnosis: {
      conclusion: ['高血压性视网膜病变（Keith-Wagener I级）'],
      recommendations: [
        '血压控制（目标<140/90mmHg）',
        '心血管系统评估',
        '每6个月眼底复查'
      ]
    }
  },
  // 近视（2项异常）
  6: {
    clinicalParams: {
      items: ['屈光度(D)', '眼轴长度(mm)', '角膜厚度(μm)', '眼底改变'],
      odValues: [-6.5, 29.6, 530, '无'],  // 屈光度异常
      osValues: [-5.5, 27.5, 540, '无'],  // 正常
      references: ['≥-6.0', '≤26', '500-550', '无']
    },
    diagnosis: {
      conclusion: ['右眼高度近视'],
      recommendations: [
        '后巩膜加固术评估',
        '近视防控宣教',
        '避免剧烈头部运动'
      ]
    }
  },
  // 其他（1项异常）
  7: {
    clinicalParams: {
      items: ['前房细胞', '玻璃体混浊', 'KP(+)', '房水闪辉'],
      odValues: ['+++', '无', '阳性', '阴性'],  // 前房细胞异常
      osValues: ['无', '无', '阴性', '阴性'], // 正常
      references: ['无', '无', '阴性', '阴性']
    },
    diagnosis: {
      conclusion: ['右眼前葡萄膜炎（轻度）'],
      recommendations: [
        '糖皮质激素滴眼液治疗',
        'HLA-B27抗原检测',
        '每周复查前房反应'
      ]
    }
  }
}
const lastDigit = Number(route.query.id) % 10;
const currentDisease = computed(() => {
  return diseaseConfig[lastDigit];
});
const getAbnormalStatus = (index: number) => {
  const { odValues, osValues, references } = currentDisease.value.clinicalParams;
  const ref = references[index];

  const parseValue = (val: any) => {
    if (typeof val === 'string') {
      const match = val.match(/[+]+/);
      return match ? match[0].length : 0;
    }
    return Number(val);
  };

  const parseReference = (ref: string) => {
    if (ref.includes('-')) return ref.split('-').map(Number);
    if (ref.startsWith('≥')) return { type: 'min', value: Number(ref.slice(1)) };
    if (ref.startsWith('≤')) return { type: 'max', value: Number(ref.slice(1)) };
    return ref;
  };

  const refValue = parseReference(ref);
  const odVal = parseValue(odValues[index]);
  const osVal = parseValue(osValues[index]);

  const checkAbnormal = (value: number | string) => {
    // 处理数值型范围
    if (Array.isArray(refValue)) {
      const [min, max] = refValue;
      return typeof value === 'number'
          ? value <= min || value >= max  // 数值比较
          : false; // 非数值类型不比较
    }

    // 处理阈值范围
    if (typeof refValue === 'object') {
      const { type, value: threshold } = refValue;
      if (typeof value !== 'number') return false;

      switch (type) {
        case 'min': return value < threshold;
        case 'max': return value > threshold;
      }
    }

    // 处理定性判断（严格相等）
    return value !== refValue;
  };

  return {
    od: checkAbnormal(odValues[index]),
    os: checkAbnormal(osValues[index])
  };
};
const props = withDefaults(defineProps<Props>(), {
  leftId: null,
  rightId: null
});

// 响应式数据
const formInline = ref({
  name: "",
  age: "",
  gender: "",
  birth: "",
  identification: "",
  mobile: "",
});

// 图像相关数据
const leftImage = ref('');  // 左眼图片URL
const rightImage = ref(''); // 右眼图片URL
const apiPrefix = '/api/images/';
// 图表容器
const chartContainer = ref<HTMLElement>();
const csvData = ref<Array<Record<string, any>>>([])
const imagesLoaded = ref(0)
const isReady = ref(false)
// 暴露给父组件的方法
const loadData = async () => {
  try {
    await loadEyeData()
    // 等待图片加载
    await new Promise((resolve) => {
      const check = () => {
        if (imagesLoaded.value >= 2) resolve(true)
      }
      check()
      const timer = setInterval(check, 100)
      setTimeout(resolve, 5000) // 超时机制
    })
    isReady.value = true
  } catch (error) {
    console.error('数据加载失败:', error)
  }
}

const getCsvPath = (imagePath: string) => {
  // 替换路径中的反斜杠为API可接受的格式
  const normalizedPath = imagePath.replace(/\\/g, '/')
  const pathSegments = normalizedPath.split('/')
  pathSegments.pop() // 移除文件名
  return `${pathSegments.join('/')}/result.csv`
}
// 获取CSV数据
const fetchInfo = async (userId:number): Promise<UserInfo> => {
  try {
    const response = await request({
      url: `/api/system/user/${userId}/get_user_info`,
      method: 'get'
    });
    return {
      name: response.data.name,
      id: response.data.id,
      identification: response.data.identification,
      mobile:response.data.mobile
    };
  } catch (error) {
    ElMessage.error('获取用户信息失败');
    throw error;
  }
};
// 数据加载方法
const loadEyeData = async () => {
  const userId = Math.trunc(Number(route.query.id) / 10);
  try {
    // 并行请求左右眼数据
    const [leftRes, rightRes] = await Promise.all([
      request({ url: `${apiPrefix}${props.leftId}/get_one/`, method: 'get' }),
      request({ url: `${apiPrefix}${props.rightId}/get_one/`, method: 'get' })
    ]);
    const userInfo = await request({
      url: '/api/system/user/user_info/',
      method: 'get'
    });
    const uploadUserInfo= await fetchInfo(userId);
    formInline.value = {
      name: uploadUserInfo?.name,
      mobile: uploadUserInfo?.mobile,
      identification: uploadUserInfo?.identification,
      birth: formatBirth(uploadUserInfo?.identification),
      age: calculateAge(uploadUserInfo?.identification).toString(),
      gender: parseGender(uploadUserInfo?.identification)
    };
    // 处理左眼数据
    if (leftRes.data?.image_url) {
      leftImage.value = `http://127.0.0.1:8000/${leftRes.data.image_url.replace(/\\/g, '/')}`;
    }

    // 处理右眼数据
    if (rightRes.data?.image_url) {
      rightImage.value = `http://127.0.0.1:8000/${rightRes.data.image_url.replace(/\\/g, '/')}`;
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('影像数据加载失败');
    }
  }
};
// 监听ID变化
watch(
    () => [props.leftId, props.rightId],
    ([newLeftId, newRightId]) => {
      if (newLeftId && newRightId) loadEyeData();
    },
    { immediate: true }
);

// 患者信息加载
const loadPatientInfo = async () => {
  try {
    const res = await api.GetPatientInfo({});
    const { data } = res;
    formInline.value = {
      name: data.name || '李四',
      mobile: data.mobile || '13800138000',
      identification: data.identification || '511925198512173579',
      birth: formatBirth(data.identification),
      age: calculateAge(data.identification).toString(),
      gender: parseGender(data.identification)
    };
  } catch (error) {
    console.error("患者信息加载失败:", error);
  }
};

// 工具函数
const formatBirth = (id: string) =>
    id ? `${id.slice(6, 10)}-${id.slice(10, 12)}-${id.slice(12, 14)}` : '';

const calculateAge = (id: string) =>
    id ? new Date().getFullYear() - parseInt(id.slice(6, 10)) : 0;

const parseGender = (id: string) =>
    id ? (parseInt(id.charAt(16)) % 2 === 0 ? "女" : "男") : '';

// 图表初始化
const initChart = async() => {
  if (!chartContainer.value) return;
  const imageId= route.query.leftId;
  const response = await request({
    url: `/api/images/${imageId}/get_one`,
    method: 'get'
  });
  const resultId = parseInt(
      response.data.image_url.match(/(\d+)_left/)[1]   // 捕获数字部分
  );
  const targetPath = response.data.image_url.replace(/\\[^\\]+$/, '');
  const localFilePath = targetPath.replace(/\//g, '\\');
  const postData = new FormData();
  postData.append('image_url', localFilePath)
  const resultResponse = await request({
    url: `/api/images/${resultId}/get_result/`,
    method: 'post',
    data: postData,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
const chart = echarts.init(chartContainer.value);
  const categories = ["白内障", "青光眼", "糖尿病", "其他", "近视", "AMD", "高血压", "正常"];
  const chartData = [
  resultResponse.data.C,  // 白内障
  resultResponse.data.G, // 青光眼
  resultResponse.data.D, // 糖尿病
  resultResponse.data.O, // 其他
  resultResponse.data.M, // 近视
  resultResponse.data.A, // AMD
  resultResponse.data.H, // 高血压
  resultResponse.data.N  // 正常
].map(value => parseFloat((value * 100).toFixed(2)));
   const combined = categories.map((name, index) => ({
    name,
    value: chartData[index]
  }));
    combined.sort((a, b) => b.value - a.value);
    const sortedCategories = combined.map(item => item.name);
  const sortedData = combined.map(item => item.value);
  const option = {
    tooltip: { trigger: "axis" },
    grid: { left: "6%", right: "6%", bottom: "10%", containLabel: true },
    xAxis: {
      type: "category",
      data: sortedCategories,
      axisLabel: { fontSize: 14 }
    },
    yAxis: {
      type: "value",
      splitLine: { lineStyle: { type: "dashed" } }
    },
    series: [{
      type: "bar",
      barWidth: '28%',
      data: sortedData,
      itemStyle: {
        borderRadius: [8, 8, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#007BFF" },
          { offset: 1, color: "#82CAFF" }
        ]),
        shadowColor: 'rgba(54,162,235,0.3)',
      },
      label: {
        show: true,
        position: "top",
        formatter: "{c}%"
      }
    }]
  };
  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};
const chartToImage = async () => {
  await nextTick()
  const chart = echarts.getInstanceByDom(chartContainer.value)
  if (!chart) return

  // 获取高分辨率图表快照
  const dataURL = chart.getDataURL({
    type: 'png',
    pixelRatio: 3,
    backgroundColor: '#fff'
  })

  // 替换原图表容器
  const img = document.createElement('img')
  img.src = dataURL
  img.style.width = '100%'
  chartContainer.value!.innerHTML = ''
  chartContainer.value!.appendChild(img)
}
defineExpose({
  loadData,
  isReady,
  chartToImage
})
// 生命周期
onMounted(async () => {

  await loadPatientInfo();
  initChart();
});
</script>
<style scoped>
/* 整合后的样式 */
.medical-report {
  max-width: 210mm;
  margin-top: 0;
  padding: 30px 50px;
  background: #fff;
  font-family: 'Microsoft YaHei', SimSun, serif;
  color: #333;
}
.image-box {
  margin: 2rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.eye-card {
  padding: 1.5rem;
  background: #f8fafc;
  margin: 1rem;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.eye-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,102,153,0.1);
}

.eye-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.eye-tag {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 1rem;
}

.left-eye {
  background: #006699;
  color: white;
}

.right-eye {
  background: #cc0000;
  color: white;
}

.eye-title {
  font-size: 1.1rem;
  color: #333;
  margin: 0;
}

.image-meta {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #666;
  display: flex;
  justify-content: space-between;
}

/* 优化后的临床参数表格 */
.clinical-params {
  margin: 0 0;
}

.param-table {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.param-header {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  background: #006699;
  color: white;
  font-weight: 600;
  padding: 1rem;
}

.param-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  padding: 0.4rem 1rem; /* 调整上下内边距 */
  min-height: 48px; /* 设置最小行高 */
  align-items: center;
  border-bottom: 1px solid #eee;
  transition: background 0.3s ease;
}

.param-row:hover {
  background: #f5f7fa;
}

.param-cell {
  padding: 0.8rem;
  display: flex;
  align-items: center;
}

.ref-value {
  color: #666;
  font-size: 0.9em;
}

.highlight .param-cell:not(:first-child) {
  color: #cc0000;
  font-weight: 600;
}

.table-note {
  padding: 1rem;
  font-size: 0.9rem;
  color: #666;
  border-top: 1px solid #eee;
}

.with-border {
  border-left: 4px solid #006699;
  padding-left: 1rem;
  margin: 2rem 0;
}
/* 原有样式保留 */

/* 新增样式 */
.form-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.form-item {
  display: flex;
  align-items: baseline;
  margin-right: 30px;
}

.image-box {
  border: 2px solid #000;
  padding: 5px;
  margin: 0 0;
}

.image-section {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 15px;
}

.report-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px; /* 圆角调整 */
  border: 1px solid #ddd;
}

#chart-container {
  width: 95%;
  height: 300px;
  margin: 20px auto;
}


.medical-report {
  max-width: 210mm;
  margin: 20px auto;
  padding: 30px 50px;
  background: #fff;
  font-family: 'Microsoft YaHei', SimSun, serif;
  color: #333;
}

.hospital-header {
  text-align: center;
  border-bottom: 3px solid #006699;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.hospital-info h1 {
  color: #006699;
  font-size: 28px;
  margin: 0;
}

.report-title {
  font-size: 22px;
  margin: 10px 0;
  color: #333;
}

.report-meta {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

.section-title {
  color: #004466;
  font-size: 18px;
  border-left: 4px solid #006699;
  padding-left: 12px;
  margin: 20px 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: baseline;
  font-size: 15px;
}

.info-item label {
  min-width: 80px;
  color: #444;
}

.emph-text {
  font-weight: 600;
  color: #006699;
}

.param-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.param-item {
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 4px;
}

.medical-list {
  padding-left: 25px;
}

.medical-list li {
  margin: 8px 0;
  line-height: 1.6;
}

.vascular-table {
  margin: 15px 0;
  border: 1px solid #ddd;
}

.vascular-table table {
  width: 100%;
  border-collapse: collapse;
}

.vascular-table th,
.vascular-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.vascular-table th {
  background: #f5f7fa;
  font-weight: 600;
}

.abnormal {
  color: #cc0000;
  font-weight: bold;
}

.diagnosis-content {
  background: #f8fafc;
  padding: 16px;
  border-radius: 4px;
}

.diagnosis-statement {
  font-size: 16px;
  line-height: 1.8;
}

.diagnosis-label {
  font-weight: 600;
  color: #004466;
}

.severity {
  margin-top: 0px;
  display: flex;
  align-items: center;
}

.risk-level {
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  margin-right: 15px;
}

.mid-risk {
  background: #ff9900;
}

.risk-scale {
  flex-grow: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.scale-bar {
  height: 100%;
  background: linear-gradient(to right, #ffd699, #ff9900);
}

.recommendations {
  margin-top: 20px;
  padding: 15px;
  background: #fff;
  border: 1px solid #eee;
}

.signature {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid #eee;
}

.signature-line {
  margin: 10px 0;
  font-size: 15px;
}

.signature-name {
  font-weight: 600;
  margin-left: 20px;
}

.disclaimer {
  color: #666;
  font-size: 12px;
  text-align: center;
  margin-top: 25px;
}
.medical-report {
  /* 屏幕显示样式 */
  width: 100%;
  max-width: 210mm; /* 限制最大宽度 */
  margin: 0 auto;
  overflow-y: auto !important; /* 强制启用垂直滚动 */

  /* 打印时特殊处理 */
  @media print {
    width: 210mm;
    min-height: 297mm;
    overflow: visible !important;
  }
}
.param-row.highlight .param-cell:not(:first-child) {
  position: relative;
  color: #cc0000;
  font-weight: 600;
}

.param-row.highlight .param-cell:not(:first-child)::after {
  content: '!';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: #cc0000;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
}

/* 诊断结论换行优化 */
.diagnosis-statement {
  line-height: 1.8;
  padding-left: 1em;
  text-indent: -1em;
}

.medical-list li {
  margin: 12px 0;
  padding-left: 1em;
  text-indent: -1em;
}
.highlight {
  position: relative;
  color: #cc0000 !important;
  font-weight: 600;
  padding-left: 28px;
}

.highlight::before {
  content: '!';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: #ffebee;
  border: 1px solid #cc0000;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
}
</style>